<template>
	<div>
		<div class="backGround">
			<view class="item flex align-items ">
				<view class="item_left">督办类型：</view>
				<view class="item_right  flex align-items" @click="templateBtn('pick','handleTypeStr','handleOptions')">
					<u-input v-model="form.handleTypeStr" placeholder="请选择" :fontSize="16" :readonly="true"
						placeholderClass="placeholderClass" style="pointer-events:none"></u-input>
					<u-icon name="arrow-right" color="#CCCCCC" :size="16"></u-icon>
				</view>

			</view>
			<view class="item flex align-items ">
				<view class="item_left">督办周期：</view>
				<view class="item_right  flex align-items"
					@click="templateBtn('pick','handlePeriodStr','handlePeriodOption')">
					<u-input v-model="form.handlePeriodStr" placeholder="请选择" :fontSize="16" :readonly="true"
						placeholderClass="placeholderClass" style="pointer-events:none"></u-input>
					<u-icon name="arrow-right" color="#CCCCCC" :size="16"></u-icon>
				</view>
			</view>
			<view class="item flex align-items ">
				<view class="item_left">督办级别：</view>
				<view class="item_right  flex align-items"
					@click="templateBtn('pick','handleLevelStr','handleLevelOption')">
					<u-input v-model="form.handleLevelStr" placeholder="请选择" :fontSize="16" :readonly="true"
						placeholderClass="placeholderClass" style="pointer-events:none"></u-input>
					<u-icon name="arrow-right" color="#CCCCCC" :size="16"></u-icon>
				</view>
			</view>
			<block v-if="show">
				<view class="item flex align-items ">
					<view class="item_left">开始时间：</view>
					<view class="item_right  flex align-items" @click="templateBtn('date','startDate')">
						<u-input v-model="form.startDate" placeholder="请选择" :fontSize="16" :readonly="true"
							placeholderClass="placeholderClass" style="pointer-events:none"></u-input>
						<u-icon name="arrow-right" color="#CCCCCC" :size="16"></u-icon>
					</view>
				</view>
				<view class="item flex align-items ">
					<view class="item_left">截止时间：</view>
					<view class="item_right  flex align-items" @click="templateBtn('date','endDate')">
						<u-input v-model="form.endDate" placeholder="请选择" :fontSize="16" :readonly="true"
							placeholderClass="placeholderClass" style="pointer-events:none"></u-input>
						<u-icon name="arrow-right" color="#CCCCCC" :size="16"></u-icon>
					</view>
				</view>
				<view class="item flex align-items ">
					<view class="item_left">工作任务：</view>
					<view class="item_right">
						<u--textarea v-model="form.workTasks"  :disabled="ifReturn" placeholder="请输入内容" autoHeight></u--textarea>
					</view>
				</view>
				<view class="item flex align-items ">
					<view class="item_left">重点任务：</view>
					<view class="item_right">
						<u--textarea v-model="form.keyTasks" :disabled="ifReturn" placeholder="请输入内容" autoHeight></u--textarea>
					</view>
				</view>
				<view class="item flex align-items ">
					<view class="item_left">要求：</view>
					<view class="item_right">
						<u--textarea v-model="form.requires" :disabled="ifReturn" placeholder="请输入内容" autoHeight></u--textarea>
					</view>
				</view>
				<view class="item flex align-items ">
					<view class="item_left">工作内容：</view>
					<view class="item_right">
						<u--textarea v-model="form.workContent" :disabled="ifReturn" placeholder="请输入内容" autoHeight></u--textarea>
					</view>
				</view>
				<view class="item flex align-items " >
					<view class="item_fu" style="flex:  0 0 auto;">附件：</view>
					<view class="item_right  flex" style="justify-content: end;">
						<view class="item_upload" @click="upload" v-if="!form.fileUrl && !ifReturn">上传附件</view>
						<view v-if="form.fileUrl" @click="upload" class="textName">{{form.fileUrl[0].name}}</view>
					</view>
				</view>
			</block>
		</div>
		<u-picker :show="pickerShow" :columns="columns" keyName="label" @cancel="pickerShow = false"
			@confirm="pickerConfirm"></u-picker>
		<u-datetime-picker :show="dateShow" v-model="value1" mode="date" @cancel="dateShow  =false"
			@confirm="dateConfirm"></u-datetime-picker>
		<helangcompress ref="helangCompress"></helangcompress>
	</div>
</template>

<script>
	import helangcompress from '@/components/helang-compress/helang-compress.vue'
	import urlConfig from "@/request/urlConfig.js";
	import {
		getDicListByCode
	} from '@/api/lssue.js'
	export default {
		components: {
			helangcompress
		},
		props: {
			show: {
				type: Boolean,
				default: true
			},
			form: {
				type: Object,
				default: (() => {})
			},
			ifReturn:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				baseUrl: urlConfig.baseURL,
				handleOptions: [],
				columns: [],
				pickerShow: false,
				key: '',
				handlePeriodOption: [{
						label: '年度',
						value: 1
					},
					{
						label: '每半年',
						value: 2
					},
					{
						label: '季度',
						value: 3
					},
					{
						label: '月度',
						value: 4
					},
					{
						label: '周',
						value: 5
					},
				],
				handleLevelOption: [{
						label: '公司',
						value: 1
					},
					{
						label: '部门',
						value: 2
					},
					{
						label: '车间',
						value: 3
					},
					{
						label: '班组',
						value: 4
					},
				],
				value1: Number(new Date()),
				dateShow: false
			}
		},
		onLoad() {},
		mounted() {
			this.getDicList()
		},
		methods: {
			upload() {
				if(this.ifReturn) return
				uni.chooseFile({
					count: 1,
					type: 'all',
					success: (res) => {
						console.log(res, "res");
						// 选择成功，获取文件路径
						const filePath = res.tempFilePaths[0];
						const fileName = res.tempFiles[0].name;
						uni.showLoading({
							title: '上传中'
						})
						const fileType = res.tempFiles[0].type;
						if (fileType.startsWith('image/')) {
							// return 'image'; // 图片类型
							let that = this;
							this.$refs.helangCompress
								.compress(res.tempFiles[0], that, 1)
								.then((uploadRes) => {
									console.log(uploadRes, "res");
									this.form.fileUrl = [uploadRes.datas]
									console.log(this.form.fileUrl);
									this.$forceUpdate()
								});
						} else {
							uni.uploadFile({
								url: this.baseUrl + '/sys/file/uploadFile', // 替换为实际的上传接口地址
								filePath: filePath,
								name: 'file',
								formData: {
									fileName: fileName // 将文件名作为参数传递给接口
								},
								header: {
									'User-Token': uni.getStorageSync('token') || "",
								},
								success: (uploadRes) => {
									console.log('上传成功', JSON.parse(uploadRes.data));
									this.form.fileUrl = [ JSON.parse(uploadRes.data).datas]
									
									uni.hideLoading()
								},
								fail: (err) => {
									// 上传失败，处理错误信息
									console.log('上传失败', err);
									uni.hideLoading()
								}
							});
						}
						// 调用上传文件接口

					},
					fail: (err) => {
						// 选择失败，处理错误信息
						console.log('选择文件失败', err);
						uni.$u.toast(err)
					}
				});
			},
			// 三个参数  pick  key 参数
			templateBtn(pick, key, option = '') {
				if(this.ifReturn) return
				console.log(pick, key, option);
				this.key = key
				if (pick == 'pick') {
					this.$nextTick(() => {
						this.columns = [this[option]]
						this.pickerShow = true
					})
				} else if (pick == 'date') {
					this.dateShow = true
				}
			},
			dateConfirm(val) {
				console.log(val, 'val');
				this.dateShow = false
				console.log();
				this.form[this.key] = this.$changeDate(val.value)
				if (this.key == 'startDate' && this.form.endDate) {
					if (this.compareTimes(this.form.startDate, this.form.endDate, '0')) {
						this.form.startDate = ''
						return uni.$u.toast('开始时间不能大于结束时间')
					}
				}
				if (this.key == 'endDate' && this.form.startDate) {
					if (this.compareTimes(this.form.startDate, this.form.endDate, '0')) {
						this.form.endDate = ''
						return uni.$u.toast('结束时间不能小于开始时间')
					}
				}

			},

			// 通用的 picker 处理方法
			pickerConfirm({
				value
			}) {
				const keyMapping = {
					handleTypeStr: 'handleType',
					handlePeriodStr: 'handlePeriod',
					handleLevelStr: 'handleLevel'
				};
				// 判断 key 是否存在于映射关系中
				if (keyMapping[this.key]) {
					const labelKey = this.key;
					const valueKey = keyMapping[this.key];
					this.form[labelKey] = value[0].label;
					this.form[valueKey] = value[0].value;
				}
				this.pickerShow = false;
			},
			getDicList() {
				let data = {
					DIC_CODE: 'HANDLE_TYPE',
				}
				getDicListByCode(data).then((res) => {
					let arrObj = JSON.parse(res.datas)
					this.handleOptions = arrObj.datas.map(v => {
						return {
							label: v.dic_value,
							value: v.dic_key
						}
					})
				})
			},
			compareTimes(startTime, endTime, comparisonType) {
				console.log(startTime);
				console.log(endTime);
				// 将输入的日期字符串转换为 Date 对象
				const start = new Date(startTime)
				const end = new Date(endTime)
				console.log(start);
				console.log(end);
				// 检查日期是否有效
				if (isNaN(start) || isNaN(end)) {
					throw new Error('无效的日期格式')
				}
				// 根据比较类型返回结果
				switch (comparisonType) {
					case '0':
						return start > end // 如果开始时间大于结束时间
					case '1':
						return start < end // 如果开始时间小于结束时间
					case '2':
						return start.getTime() === end.getTime() // 如果开始时间等于结束时间
					default:
						throw new Error('无效的比较类型，请使用“大于”、“小于”或“等于”')
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		min-height: 100rpx;
		border-bottom: 1rpx solid #E6E6E6;
		padding: 0 31rpx;

		&_left {
			// width: 220rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 33rpx;
			line-height: 47rpx;
			text-align: left;
			font-style: normal;
			color: #666666;
		}

		&_left::before {
			content: '*';
			color: #FF0000;
		}

		&_right {
			flex: 1;

			/deep/.u-input {
				height: 65rpx;
				margin: 0 auto;
				font-size: 16rpx;
			}
		}

		&_fu {
			width: 196rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 33rpx;
			line-height: 47rpx;
			text-align: left;
			font-style: normal;
			color: #666666;
		}

		&_upload {
			width: 240rpx;
			height: 60rpx;
			background: #267DFF;
			text-align: center;
			line-height: 60rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 29rpx;
			color: #FFFFFF;
		}
	}

	.backGround {
		background-color: #FFF;
		padding-bottom: 5rpx;
	}
	.textName {
		width: 500rpx;
		word-wrap: break-word;
		white-space: pre-line;
		text-align: right;
	}
	
	/deep/ .u-textarea--disabled {
		background-color: #FFF !important;
	
	}
	
	/deep/ .uni-textarea-textarea {
		color: black !important;
		font-size: 16px;
	}
</style>